<template>
    <div id="music" class="md-scrollbar">
        <div @click="getMusic" class="billboard" v-if="!!billboard" :key="i" v-for="(item,i) in billboard">
            <img :src="item.pic_s192" alt="">
        </div>
    </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "music",
  mounted() {
    this.getBillboard();
  },
  computed: {
    ...mapState({
      billboard: state => state.billboard
    })
  },
  methods: {
    ...mapActions({
      getBillboard: "GET_BILLBOARD",
    }),
    getMusic(){
      this.$router.push("mSingle");
    }
  }
};
</script>
<style lang="less" scoped>
.billboard {
  width: 50%;
  padding: 1px;
  display: inline-block;
}
@media screen and (max-width: 414px) {
  .md-scrollbar {
    max-height: 620px;
    overflow: auto;
  }
}
@media screen and (max-width: 375px) {
  .md-scrollbar {
    max-height: 550px;
    overflow: auto;
  }
}
@media screen and (max-width: 320px) {
  .md-scrollbar {
    max-height: 452px;
    overflow: auto;
  }
}
</style>


